<template>
  <view class="cart-container">
    <!-- 购物车列表 -->
    <view class="cart-list">
      <view class="cart-item" v-for="(item, index) in cartList" :key="index">
        <view class="item-select">
          <checkbox-group @change="toggleSelect(index)">
            <checkbox :checked="item.selected" color="#ff2d4a"/>
          </checkbox-group>
        </view>
        <image class="item-image" :src="item.image" mode="aspectFit"></image>
        <view class="item-info">
          <text class="item-title">{{item.name}}</text>
          <text class="item-spec">规格: {{item.spec}}</text>
          <view class="item-bottom">
            <text class="item-price">¥{{item.price}}</text>
            <view class="item-num">
              <text class="num-btn" @click="changeNum(index, -1)">-</text>
              <text class="num">{{item.num}}</text>
              <text class="num-btn" @click="changeNum(index, 1)">+</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 空购物车提示 -->
    <view class="empty-cart" v-if="cartList.length === 0">
      <image src="/static/empty-cart.png" mode="aspectFit"></image>
      <text>购物车空空如也~</text>
      <button class="go-shopping" @click="goIndex">去逛逛</button>
    </view>
    
    <!-- 结算栏 -->
    <view class="settle-bar" v-if="cartList.length > 0">
      <view class="select-all">
        <checkbox-group @change="toggleAll">
          <checkbox :checked="isAllSelected" color="#ff2d4a"/>
        </checkbox-group>
        <text>全选</text>
      </view>
      <view class="total">
        <text>合计: </text>
        <text class="total-price">¥{{totalPrice}}</text>
      </view>
      <view class="settle-btn" @click="goSettle">
        结算({{selectedCount}})
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      cartList: [
        {
          id: 1,
          name: '商品1',
          image: '/static/goods1.jpg',
          spec: '默认规格',
          price: '99.00',
          num: 1,
          selected: true
        },
        {
          id: 2,
          name: '商品2',
          image: '/static/goods2.jpg',
          spec: '默认规格',
          price: '129.00',
          num: 2,
          selected: true
        },
        {
          id: 3,
          name: '商品3',
          image: '/static/goods3.jpg',
          spec: '默认规格',
          price: '59.00',
          num: 1,
          selected: false
        }
      ]
    }
  },
  computed: {
    // 是否全选
    isAllSelected() {
      return this.cartList.every(item => item.selected) && this.cartList.length > 0
    },
    // 选中商品总价
    totalPrice() {
      return this.cartList.reduce((total, item) => {
        return item.selected ? total + item.price * item.num : total
      }, 0).toFixed(2)
    },
    // 选中商品数量
    selectedCount() {
      return this.cartList.reduce((count, item) => {
        return item.selected ? count + item.num : count
      }, 0)
    }
  },
  methods: {
    // 切换商品选中状态
    toggleSelect(index) {
      this.cartList[index].selected = !this.cartList[index].selected
    },
    // 全选/取消全选
    toggleAll() {
      const selectStatus = !this.isAllSelected
      this.cartList.forEach(item => {
        item.selected = selectStatus
      })
    },
    // 修改商品数量
    changeNum(index, num) {
      const newNum = this.cartList[index].num + num
      if (newNum < 1) {
        uni.showToast({
          title: '商品数量不能少于1',
          icon: 'none'
        })
        return
      }
      this.cartList[index].num = newNum
    },
    // 去结算
    goSettle() {
      if (this.selectedCount === 0) {
        uni.showToast({
          title: '请选择要结算的商品',
          icon: 'none'
        })
        return
      }
      uni.navigateTo({
        url: '/pages/order/confirm'
      })
    },
    // 去首页
    goIndex() {
      uni.switchTab({
        url: '/pages/index/index'
      })
    }
  }
}
</script>

<style>
.cart-container {
  padding-bottom: 100rpx;
}
.cart-list {
  padding: 20rpx;
}
.cart-item {
  display: flex;
  padding: 20rpx;
  margin-bottom: 20rpx;
  background-color: #fff;
  border-radius: 10rpx;
}
.item-select {
  display: flex;
  align-items: center;
  margin-right: 20rpx;
}
.item-image {
  width: 160rpx;
  height: 160rpx;
  margin-right: 20rpx;
}
.item-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.item-title {
  font-size: 28rpx;
  color: #333;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.item-spec {
  font-size: 24rpx;
  color: #999;
}
.item-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.item-price {
  font-size: 32rpx;
  color: #ff2d4a;
  font-weight: bold;
}
.item-num {
  display: flex;
  align-items: center;
}
.num-btn {
  width: 50rpx;
  height: 50rpx;
  line-height: 50rpx;
  text-align: center;
  border: 1rpx solid #eee;
  font-size: 32rpx;
}
.num {
  width: 80rpx;
  text-align: center;
  font-size: 28rpx;
}
.empty-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 100rpx;
}
.empty-cart image {
  width: 300rpx;
  height: 300rpx;
  margin-bottom: 20rpx;
}
.empty-cart text {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 40rpx;
}
.go-shopping {
  width: 300rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background-color: #ff2d4a;
  color: #fff;
  border-radius: 40rpx;
  font-size: 28rpx;
}
.settle-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 100rpx;
  display: flex;
  align-items: center;
  padding: 0 20rpx;
  background-color: #fff;
  border-top: 1rpx solid #eee;
}
.select-all {
  display: flex;
  align-items: center;
  margin-right: 20rpx;
}
.select-all text {
  margin-left: 10rpx;
  font-size: 28rpx;
}
.total {
  flex: 1;
  text-align: right;
  font-size: 28rpx;
}
.total-price {
  color: #ff2d4a;
  font-weight: bold;
}
.settle-btn {
  width: 200rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  background-color: #ff2d4a;
  color: #fff;
  border-radius: 40rpx;
  font-size: 28rpx;
  margin-left: 20rpx;
}
</style>